<template>
	<div>
		<a-modal :title="titleMap[props.type]" v-model:open="locaVisible" v-bind="$attrs" :getContainer="false" width="800px">
			<template #footer>
				<a-button key="back" @click="close">取消</a-button>
				<a-button key="submit" type="primary" :loading="loading" @click="handleSubmit">确定</a-button>
			</template>
			<a-form ref="formRef" :model="form">
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item label="菜单名称" name="name" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }"
							:rules="[{ required: true, message: '请输入菜单名称!' }]">
							<a-input v-model:value="form.name" placeholder="请输入菜单名称"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="菜单状态" name="status" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
							<a-radio-group v-model:value="form.status" name="radioGroup">
								<a-radio :value="1">启用</a-radio>
								<a-radio :value="0">禁用</a-radio>
							</a-radio-group>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item label="路由名称" name="routerName" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }"
							:rules="[{ required: true, message: '路由名称!' }]">
							<a-input v-model:value="form.routerName" placeholder="请输入路由名称"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="路由路径" name="routerPath" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }"
							:rules="[{ required: true, message: '路由路径!' }]">
							<a-input v-model:value="form.routerPath" placeholder="请输入路由路径"></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item label="菜单排序" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
							<a-input-number v-model:value="form.order" :min="0"></a-input-number>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="菜单图标" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
							<a-select v-model:value="form.icon">
								<template #suffixIcon>
									<heart-two-tone two-tone-color="#eb2f96" />
								</template>
								<a-select-option v-for="(icon, index) in IconDatas" :key="index">
									<a-space :size="6">
										<component :is="icon" style="font-size: 16px;" />
										<span>{{ icon }}</span>
									</a-space>
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item label="父级菜单" name="parent" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
							<a-cascader v-model:value="form.parent" :defaultValue="[0]" :field-names="{ label: 'label', value: 'value', children: 'children' }" :options="menuData" placeholder="Please select" />
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="隐藏菜单" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
							<a-radio-group v-model:value="form.hidden" name="radioGroup">
								<a-radio :value="1">显示</a-radio>
								<a-radio :value="0">隐藏</a-radio>
							</a-radio-group>
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</a-modal>
	</div>
</template>

<script setup lang="ts">
import { computed, defineComponent, ref, reactive } from 'vue';
import { HeartTwoTone } from '@ant-design/icons-vue';
import type { Form } from "./form";
import { useIcon } from "@/hooks/common/useIcon";

const { IconDatas } = useIcon();
defineComponent({ name: 'MenuFormModal' });
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	type: {
		type: String,
		default: 'add'
	},
	id: {
		type: [Number, String],
		default: 0
	}
});
const emits = defineEmits(['update:modelValue']);
const locaVisible = computed({
	get() {
		return props.modelValue;
	},
	set(val) {
		emits('update:modelValue', val);
	}
});
const titleMap = {
	add: '新增菜单',
	edit: '编辑菜单',
	children: '新增子菜单'
};

// 获取菜单项
const menuData = ref<Array<any>>([
	{
		label: '根节点',
		value: 0
	},
	{
		value: 1,
		label: 'Zhejiang',
		children: [
			{
				value: 11,
				label: 'Hangzhou',
				children: [
					{
						value: 111,
						label: 'West Lake',
					}
				]
			}
		]
	}
]);

// 表单
const formRef = ref();
const loading = ref<boolean>(false);
const form = reactive<Form>({
	name: '',
	status: 1,
	routerName: '',
	routerPath: '',
	order: 1,
	icon: '',
	parent: [0],
	hidden: 1
});

// 获取菜单数据
// #TODO: 获取菜单数据,仅在type为children和edit时调用
// #TODO: type为children时需同步渲染表单中父级菜单
// #TODO: type为edit时需同步渲染表单中菜单信息

const handleSubmit = () => {
	loading.value = true;
	formRef.value.validateFields()
		.then((values: Form) => {
			console.log('Received values of form: ', values);
			//   console.log('formState: ', toRaw(form));
			//   visible.value = false;
			formRef.value.resetFields();
			//   console.log('reset formState: ', toRaw(formState));
		})
		.catch((error: any) => {
			console.log('error', error);
		});
	// console.log('submit');
	loading.value = false;
	// reset();
};
const reset = () => {
	formRef.value.resetFields();
};
const close = () => {
	locaVisible.value = false;
	reset();
};

</script>

<style scoped lang="scss">
.ant-input-number {
	width: 100%;
}
</style>
